<template>
  <!-- 待办事项卡片容器 -->
  <div 
    class="todo-item" 
    :class="{ done: todo.done }"
  >
    <!-- 待办事项信息容器 -->
    <div class="todo-info">
      <!-- 待办事项标题 -->
      <h3>{{ todo.title }}</h3>
    </div>
    <!-- 待办事项操作按钮容器 -->
    <div class="todo-actions">
      <!-- 复选框 -->
      <el-checkbox 
        v-model="todo.done" 
        @change="handleToggle(todo.id)"
      >
        <!-- 根据待办事项的状态显示不同的文本 -->
        {{ todo.done ? '已完成' : '未完成' }}
      </el-checkbox>
      <!-- 查看详情链接：从首页跳转到详情页 -->
      <router-link 
        :to="`/todo/${todo.id}`" 
        class="detail-link"
      >
        查看详情
      </router-link>
      <!-- 删除按钮 -->
      <el-button 
        type="danger" 
        icon="el-icon-delete" 
        @click="handleDelete(todo.id)"
        size="mini"
      >
        删除
      </el-button>
    </div>
  </div>
</template>

<script setup>
// 从 vue 库中导入 defineProps 函数，用于定义组件的 props
import { defineProps } from 'vue'
// 导入待办事项的状态管理仓库
import { useTodoStore } from '../store/to-do.js'
// 从 element-plus 库中导入 ElMessageBox 组件，用于显示确认弹窗
import { ElMessageBox } from 'element-plus' // 引入确认弹窗

// 获取待办事项的状态管理仓库实例
const store = useTodoStore()
// 定义组件的 props，接收一个 todo 对象
const props = defineProps(['todo'])

// 处理复选框状态改变的函数
const handleToggle = (id) => {
  // 调用仓库的 toggleTodo 方法切换待办事项的状态
  store.toggleTodo(id)
}

// 删除逻辑
const handleDelete = (id) => {
  // 显示确认弹窗
  ElMessageBox.confirm(
    '此操作将永久删除该待办，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 如果用户点击确定，调用仓库的 deleteTodo 方法删除待办事项
    store.deleteTodo(id)
  }).catch(() => {
    // 取消删除
  })
}
</script>

<style scoped>
.todo-item {
  /* 背景颜色为白色 */
  background: #fff;
  /* 内边距为 16px */
  padding: 16px;
  /* 下外边距为 12px */
  margin-bottom: 12px;
  /* 圆角半径为 8px */
  border-radius: 8px;
  /* 添加阴影效果 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  /* 过渡效果，持续时间为 0.3s */
  transition: all 0.3s ease;
  /* 使用 flex 布局，水平排列子元素 */
  display: flex;
  /* 子元素两端对齐 */
  justify-content: space-between;
  /* 子元素垂直居中 */
  align-items: center;
}
.done {
  /* 文本添加删除线 */
  text-decoration: line-through;
  /* 透明度为 0.7 */
  opacity: 0.7;
  /* 背景颜色为浅灰色 */
  background: #f0f0f0;
}
.todo-info {
  /* 占据剩余空间 */
  flex: 1;
}
.todo-actions {
  /* 使用 flex 布局，水平排列子元素 */
  display: flex;
  /* 子元素之间的间距为 10px */
  gap: 10px;
}
.detail-link {
  /* 去除下划线 */
  text-decoration: none;
  /* 字体颜色为蓝色 */
  color: #409eff;
}
</style>